.home {
  background-color: #d1d9e2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;

  .titleArea {
    width: 100%;
    background-color: white;
    min-height: 80px;
    align-items: center;
    display: flex;
    border-bottom: 1.5px solid #e3e5e6;

    .title {
      font-weight: bold;
      margin-left: 25px;
      font-size: 18px;
    }
  }

  .mainArea {
    height: calc(100vh - 80px);
    padding: 20px 10px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      width: 100%;
      height: 70%;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;

      .top-left {
        overflow-y: auto;
        overflow-x: hidden;
        width: 60%;
        height: 100%;
        margin-right: 20px;
        padding: 15px;
        background-color: white;

        .title {
          width: 100%;
          display: flex;
          height: 5%;
          align-items: center;

          .isSelected {
            cursor: pointer;
            color: green;
            text-decoration: underline;
          }

          p {
            display: flex;
            align-items: center;
            font-weight: bold;
            color: #3a3c3d;
            font-size: 15px;
            margin-right: 9px;

            .icon {
              margin: 0 5px;
            }

            .el-icon {
              margin: 0 5px;
              font-size: 10px;
            }
          }
        }

        .posts {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;

          .post-container {
            display: flex;
            align-items: flex-start;
            background: #FFFFFF;
            border-radius: 10px;
            padding: 16px;
            margin: 16px;
            width: 100%;
            box-sizing: border-box;

            .avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 16px;
            }

            .right {
              justify-content: flex-end;
            }

            .post-content {
              display: flex;
              flex-direction: row;
              margin-bottom: 30px;
              align-items: flex-start;
              width: 100%;

              .author-info {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333;
                margin-bottom: 12px;

                .title {
                  width: fit-content;
                  margin-right: 30px;
                  font-size: 16px;
                  font-weight: bold;
                }

                .id {
                  font-size: 14px;
                  color: #c1c0c1;
                  font-weight: bold;
                }

                .timestamp {
                  font-size: 14px;
                  font-weight: bold;
                  color: #c1c0c1;
                }
              }

              .message {
                font-size: 16px;
                color: #333;
                background: #F5F5F5;
                border-radius: 5px;
                min-height: 2rem;
                font-weight: bold;
                padding: 10px 22px 15px 10px;
                margin: 8px 0;
              }

              .reply-button {
                background: white;
                width: fit-content;
                color: #a5a5a5;
                border: none;
                white-space: nowrap;
                font-weight: bold;
                border-radius: 20px;
                padding: 8px 16px;
                cursor: pointer;
                font-size: 14px;
                text-align: center;
                align-self: flex-end;
                margin-top: auto;
                text-decoration: none;
              }
            }
          }
        }
      }
    }

    .top-right {
      width: 40%;
      background-color: white;

      .profile-card {
        display: flex;
        flex-direction: column;
        padding: 10px;

        .profile {
          padding: 10px;
          display: flex;

          .avatar {
            flex: 0 0 auto;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 15px;
            border: 3px solid #fff; // White border for the avatar
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }

          .user-info {
            flex: 1;
            display: flex;
            padding: 10px;
            flex-direction: column;
            align-items: flex-start;

            .name {
              font-size: 20px;
              font-weight: bold;
              color: #333;
            }

            .details {
              margin-top: 5px;
              font-size: 14px;
              color: #666;

              .detail {
                margin-right: 10px;
                font-size: 20px;
                color: #c5c2c2;
                font-weight: bold;

                &:after {
                  content: '|';
                  margin-left: 10px;
                  color: #ddd;
                }

                &:last-child:after {
                  content: none;
                }
              }
            }
          }
        }

        .personal_info {
          display: flex;
          flex-direction: column;
          font-weight: bold;

          .p-top {
            margin: 10px;

            h3 {
              font-size: 20px;
            }
          }

          .p-bottom {
            margin: 15px;

            h4 {
              font-size: 16px;
            }
          }

          .chart-container {
            width: 100%;
            height: 250px;
            background-color: #efd6e4;
            border-radius: 8px;
            padding: 15px;
            box-sizing: border-box;

            .echarts-title {
              color: #fff;
              text-align: center;
              font-size: 16px;
              padding-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 40%;
      margin-bottom: 10px;
      background-color: white;

      .comment-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        padding: 6px 12px;
        height: 100%;
        box-sizing: border-box;

        .input-area {
          width: 80%;
          margin-right: 15px;
          height: 100%;
          box-sizing: border-box;

          h2 {
            color: #545454;
            height: 10%;
            font-size: 20px;
            margin-bottom: 10px;
          }

          textarea {
            width: 100%;
            height: 70%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            background-color: #f0f0f0;
          }
        }

        .action-buttons {
          display: flex;
          margin-left: 20px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 20%;
          padding: 10px;
          height: 100%;

          button {
            padding: 5px 10px;
            width: 70%;
            height: 80%;
            margin-bottom: 5px;
            color: #3e3d3c;
            font-weight: bold;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            font-weight: bold;
            background-color: #f5de10;

            &:hover {
              background-color: #f9e20a;
            }
          }
        }
      }
    }
  }
}

// Additional styles for upload validation
.el-upload {
  .el-upload-dragger {
    width: 100%;
    border-radius: 8px;
    background-color: #f2f2f2;
    border: 2px dashed #d9d9d9;
    text-align: center;
    padding: 10px;

    .el-icon-upload {
      font-size: 32px;
      color: #909399;
    }

    .el-upload__text {
      font-size: 14px;
      color: #606266;
      margin-top: 10px;
    }

    &:hover {
      border-color: #409eff;
    }
  }
}
